<template>
  <div>
    <div class="theme" :style="{ background: currentThemeColor }">
      <span>用户登录</span>
      <span class="qh" @click="changeTheme">切换主题</span>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="phoneNumber"
            name="phoneNumber"
            label="用户名"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写用户名' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern: /^[a-zA-Z]\w{5,}$/,
                message: '密码必须以字母开头的六位数字字母组合',
              },
            ]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {useRouter}from 'vue-router'
const router=useRouter()
const theme = ["red", "origin", "blue", "brown", "green"];
const currentTheme = ref(0);
const currentThemeColor = computed(() => theme[currentTheme.value]);
const changeTheme = () => {
  currentTheme.value = (currentTheme.value + 1) % theme.length;
};

const phoneNumber = ref("");
const password = ref("");
const onSubmit = (values) => {
  if(values.phoneNumber==='13754428069' && values.password==='a123456'){
    alert('登录成功')
    router.push('/home')
    sessionStorage.setItem('token',phoneNumber.value)
  }else{
    alert('登录失败')
  }
};
</script>

<style scoped>
.theme {
  width: 100%;
  height: 50px;
  background: red;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}
.qh {
  font-size: 12px;
  float: right;
}
</style>